<template>

  <div class="main">
    <img src="/static/images/rankbg.jpg" class="background" />

    <div class="rankinglist">
<!--标题-->
      <i-row class="titlefont">
        <i-col span="4" offset="3" class="rank">排名</i-col>
        <i-col span="10" offset="1" class="textlist">用户</i-col>
        <i-col span="4" offset="0" class="textlist">积分</i-col>
      </i-row>
<!--前十-->
      <i-row class="rankfont" v-for="item in rankList" :key="index" :class="top3[index]">

        <i-col span="3" offset="1">
            <!--            头像 url地址-->
          <view class="topavatar">
            <i-avatar :src="item.avatarUrl"></i-avatar>
          </view>
        </i-col>

        <i-col span="3" offset="0" class="rank">
          <li >{{index+1}}.</li>
        </i-col>
        <i-col span="10" offset="1" class="textlist">
          <li>
            <p class="hidename">{{item.name}}</p>
          </li>
        </i-col>
        <i-col span="4" offset="0" class="textlist">
          <li >{{item.score}}</li>
        </i-col>

      </i-row>

      <div class="bordertop"></div>
<!--      当前用户积分-->
      <i-row class="userrankfont">
        <i-col span="3" offset="1">
          <view class="useravatar">
            <!-- 头像地址  后续换成url地址 不用opendata-->
            <open-data type="userAvatarUrl"></open-data>
          </view>
        </i-col>
        <i-col span="3" offset="0" class="rank">{{userRank.rank}}.</i-col>
        <i-col span="10" offset="1" class="textlist">
<!--          <p class="hidename">{{userrank.name}}</p>-->
          <p>
          <open-data class="nametext" type="userNickName"></open-data>
          </p>
        </i-col>
        <i-col span="4" offset="0" class="textlist">{{userRank.score}}</i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
  import HttpKit from './http-kit'
  export default {
    data () {
      return {
        openid: '',
        userRank: {
          // url: '',
          // name: 'YOU',
          score: '0',
          rank: ''
        },
        rankList: [{
          avatarUrl: '',
          name: '',
          score: ''
        }],
        top3: ['no1', 'no2', 'no3']
      }
    },
    methods: {
      getRankList () {
        HttpKit.getRankingList(this.openid,
          (rankInfo) => {
            this.rankList = rankInfo.rankingList
            this.userRank.rank = rankInfo.userRank
          })
      }
    },
    beforeMount () {
      this.userRank.score = this.$root.$mp.query.score
      this.openid = this.$root.$mp.query.openid
      this.getRankList()
    },
    onPullDownRefresh () {
      this.getRankList()
      wx.stopPullDownRefresh()
    }
  }
</script>

<style scoped>
  .main{
    overflow: hidden;
  }
  .background {
    position: fixed;
    height: 100%;
    width: 100%
  }
  .rankinglist {
    width: 320px;
    border-radius:20rpx;
    border:6rpx solid #FFFFFF;
    margin:50px auto 0 auto;
    position:relative;
    color:#C0C0C0;
    padding:5px 0 5px 0;
  }
  .rank{
    text-align: right;
  }
  .textlist{
    text-align: center;
  }
  .rankfont{
    line-height: 40px;
    font-size:20px;
  }
  .titlefont{
    line-height: 40px;
    font-size:20px;
    color: white;
  }
  .userrankfont{
    line-height: 40px;
    font-size:20px;
    color: #2D8CF0;
  }
  .useravatar{
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    transform: translateY(9rpx);
  }
  .topavatar{
    transform: translateY(-6rpx);
  }
  .bordertop{
    width: 320px;
    border:2px solid #FFFFFF;
    margin:5px auto;
    border-radius: 25px;
  }
  .hidename{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .no1{
    color: #FFD700;
  }
  .no2{
    color: #E6E8FA;
  }
  .no3{
    color: #B87333;
  }
</style>
